<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>乐热评-因为热爱所以快乐</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/comment.css">


</head>
<body class="mbg">

<!-- 你的HTML代码 -->
<div class="layui-header header header-doc ">
    <div class="layui-main pbg">
        <a class="logo" href="../index.html"><img src="../img/logo.png"/>
        </a>
        <ul class="layui-nav layui-layout-left" lay-filter="">
            <li class="layui-nav-item "><a href="../index.html">首页</a></li>
            <li class="layui-nav-item "><a href="../search.html">搜索</a></li>

            <li class="layui-nav-item"><a href="../event.html">动态</a></li>
            <li class="layui-nav-item layui-layout-right layui-this">
                <a href="javascript:;">我的</a>
                <dl class="layui-nav-child">
                    <dd><a href="../my/my.html">个人中心</a></dd>
                    <dd><a href="../my/message.html">留言消息</a></dd>
                    <dd><a href="../my/setting.html#password">修改密码</a></dd>
                    <dd><a href="../my/friends.html">我的关注</a></dd>
                    <dd><a class='logout'>退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</div>


<div class="layui-main pbg">


    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-md12">

            <div class="p-prf">
                <dl class="m-proifo f-cb" id="head-box">
                    <dt class="f-pr" id="ava">
                        <img class=" head"
                             src="">
                        <div class="btm"><a href="../my/setting.html#head-icon" class="upload">更换头像</a></div>
                    </dt>
                    <dd>
                        <div class="name f-cb">
                            <div class="f-cb">
                                <h2 id="j-name-wrap" class="wrap f-fl f-cb ">
                                    <span class="tit f-ff2 s-fc0 f-thide"></span>
                                </h2>
                            </div>
                        </div>
                        <ul class="data f-cb ws16">
                            <li><i class="layui-icon"></i></li>
                            <!--男&#xe662; 女&#xe661;-->
                            <li></li>
                            <li></li>
                        </ul>


                        <div class="clearfix ">
                            <div class="inf layui-form-label float_left">个性签名：</div>
                            <div class="inf">&nbsp;</div>

                            <div class="inf layui-form-label float_left">邮箱：</div>
                            <div class="inf">&nbsp;</div>
                        </div>


                    </dd>
                </dl>

            </div>

            <div class="layui-row">
                <div class="layui-col-md2">
                    <ul class="hf-con-block" lay-filter="test">
                        <li class=" tab-block"><a class="ws18 float_right this" href="my.html"> 动态</a></li>
                        <li class=" tab-block"><a class="ws18 float_right" href="../my/friends.html"> 关注</a></li>
                        <li class=" tab-block"><a class="ws18 float_right" href="../my/message.html"> 留言</a></li>
                        <li class=" tab-block"><a class="ws18 float_right" href="../my/setting.html#information"><i
                                class="layui-icon">&#xe623;</i> 设置</a></li>
                    </ul>
                </div>
                <div class="layui-col-md9">
                    <div class="layui-row layui-col-space10 setting">
                        <div class="layui-col-md2 ">
                            <a href="#information">资料</a>
                        </div>
                        <div class="layui-col-md2 ">
                            <a href="#permission">权限</a>
                        </div>
                        <div class="layui-col-md2">
                            <a href="#password">
                                密码
                            </a>
                        </div>
                        <div class="layui-col-md2">
                            <a href="#email">
                                邮箱
                            </a>
                        </div>
                        <div class="layui-col-md2">
                            <a href="#head-icon">
                                头像
                            </a>
                        </div>
                    </div>
                    <div id="information" class="setting">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">性别</label>
                                    <div class="layui-input-inline" data-type="sex">

                                        <input type="radio" name="sex" value="男" title="男" checked>
                                        <input type="radio" name="sex" value="女" title="女">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline layui-form-label-col">生日</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="date" id="date" autocomplete="off"
                                               lay-verify="required|date"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">城市</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="city" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">

                                    <label class="layui-input-inline  layui-form-label-col">个性介绍</label>
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <textarea placeholder="聊一聊自己。" name="introduce"
                                                      class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="info">立即提交</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div id="permission" class="setting" hidden>
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">谁可以查看我的动态</label>
                                    <div class="layui-input-inline">
                                        <select name="events">
                                            <option value="0">所有人</option>
                                            <option value="1">我关注的人</option>
                                            <option value="2">仅自己</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">谁可以查看我关注的人</label>
                                    <div class="layui-input-inline">
                                        <select name="friend">
                                            <option value="0">所有人</option>
                                            <option value="1">我关注的人</option>
                                            <option value="2">仅自己</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">谁可以给我留言</label>
                                    <div class="layui-input-inline">
                                        <select name="message">
                                            <option value="0">所有人</option>
                                            <option value="1">我关注的人</option>
                                            <option value="2">仅自己</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">出现在附近</label>
                                    <div class="layui-input-inline float_right">
                                        <input type="checkbox" checked="" name="nearby" lay-skin="switch"
                                               lay-filter="switchTest" lay-text="ON|OFF">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="permission">立即提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="password" class="setting" hidden>
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">原密码</label>
                                    <div class="layui-input-inline">
                                        <input type="password" name="oldPassword" lay-verify="required|pass"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">新密码</label>
                                    <div class="layui-input-inline">
                                        <input type="password" name="newPassword" lay-verify="required|pass"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">确认密码</label>
                                    <div class="layui-input-inline">
                                        <input type="password" name="rePassword" lay-verify="required|pass"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="password">立即提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="email" class="setting" hidden>
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-input-inline  layui-form-label-col">输入新邮箱</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="mail" lay-verify="mail" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="mail">激活</button>
                                </div>
                            </div>
                        </form>

                    </div>
                    <div id="head-icon" class="setting" hidden>
                        <p id="gravatar-tips" class=" layui-btn layui-btn-normal " style="margin: 5px">
                            Gravatar用户?
                        </p>

                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="smfile">选择图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo1" style="width: 180px;height: 180px;">
                                <p>
                                    <button class="layui-btn-normal layui-btn " id="upload" style="display:none;">上传
                                    </button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
    <div class="footer">
        &copy;Copyright 2018 乐热评<br>
        感谢：<a>Layui</a>,<a>Bootstrap</a>,<a>网易云</a>,<a>QQ音乐</a>,<a>酷我音乐</a>...<br>
        联系我们：<a href="mailto:amoxuk@aliyun.com">amoxuk#aliyun.com(#换成@)</a>
    </div>


</div>

<script type="text/javascript" src="../js/jquery-1.12.0.min.js"></script>
<script src="../js/jquery.session.js"></script>
<script src="../layui/layui.js"></script>
<script src="../js/top.js"></script>
<script src="../js/common.js"></script>
<script src="../js/aes.js"></script>
<script src="../js/zone.js"></script>


<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作

    layui.use(['form', 'layedit', 'laydate', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });


        form.verify({
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });
        form.on('submit(info)', function (data) {
            console.log(data.field);
            $.ajax({
                async: true
                , type: 'post'
                , url: '/user/info'
                , data: data.field
                , success: function (res) {
                    layer.msg(res.msg);
                    setting.reload();
                }
                , error: function (res) {
                    setting.error(res);
                }
            });
            return false;
        });
        form.on('submit(permission)', function (data) {
            console.log(data.field);
            if (!data.field.nearby) {
                data.field.nearby = 0;
            } else
                data.field.nearby = 1;

            $.ajax({
                async: true
                , type: 'post'
                , url: '/user/permission'
                , data: data.field
                , success: function (res) {
                    if (res.status === 0) {
                        $.cookie("user", {'permission': data.field});
                    }
                    layer.msg(res.msg);
                    setting.reload();

                }
                , error: function (res) {
                    setting.error(res);
                }
            });
            return false;
        });
        form.on('submit(password)', function (data) {
            if (data.field.rePassword != data.field.newPassword) {
                layer.tips('两次密码不相同', 'input[name=rePassword]');
                return false;
            }
            $.ajax({
                async: false
                , type: 'post'
                , url: '/user/password'
                , data: {
                    'data': aes.encrypt(JSON.stringify({
                        'oldPassword': aes.encrypt(data.field.oldPassword),
                        'newPassword': aes.encrypt(data.field.newPassword)
                    }))
                }
                , success: function (res) {
                    layer.msg(res['msg']);
                    setting.reload();

                }
                , error: function (res) {
                    setting.error(res);
                }
                , complete: function () {
                    /*清空输入框*/
                    $('#password').find('input').val("");
                    return false;
                }
            });
            return false;
        });
        form.on('submit(mail)', function (data) {
            $.ajax({
                url: '/user/mail'
                , type: 'post'
                , async: false
                , data: {'data': data.field.mail}
                , success: function (res) {
                    if (res.status === 0) {
                        layer.alert("激活成功，请前往邮箱查看邮件并激活。");
                    } else {
                        layer.alert(res.msg);
                    }
                }
                , error: function (res) {
                    setting.error(res);
                }
            });
            return false;
        });

    });
    layui.use(['element', 'jquery'], function () {

        var element = layui.element;
        var $ = layui.jquery;

        $("#gravatar-tips").on('click', function () {
            layer.open({
                title: "Gravatar:"
                , btn: ['关闭']
                , content: "<p >我们的头像是基于Gravatar，可以通过邮箱名在共享你在Gravatar设置的头像。\n" +
                "                            <br>如果你已经注册了Gravatar并且设置了头像，那么你需要到进行设置\n" +
                "                            <br>如果你没有注册过，可以直接通过上传修改你在本站的头像。\n" +
                "                            <br>前往修改/注册:<a href=\"https://en.gravatar.com/\" target=\"_blank\">https://en.gravatar.com/</a>\n" +
                "                            <br>\n" +
                "                        </p>"

            });
        });


        var p = $.cookie('user').permission;
        if (true || $.isEmptyObject(p)) {
            $.ajax({
                async: true
                , url: '/user/permission'
                , type: 'get'
                , success: function (data) {
                    if (data.status === 0) {
                        $.cookie('user', {'permission': data['data']});
                    } else
                        layer.msg(data.msg);
                    console.log(data['data']);
                    /**
                     * 设置permission选项
                     * {count: 1, data: {events: 0, friend: 0, message: 0, nearby: 1, uid: 1}, msg: "操作成功", status: 0}
                     * */
                    setting.permission(data['data']);
                }
                , error: function (res) {
                    setting.error(res);
                }
            });
        } else {
            setting.permission(p);
        }
    });


    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
        var userInfo = $.cookie("user").user;
        if ($.isEmptyObject(userInfo) && !userInfo) {

            layer.alert("请重新登录。");
            return;
        }
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#smfile'
            //'https://sm.ms/api/upload'
            , url: 'https://icon.amoxuk.com/icon?' + userInfo['data'].icons.split("?")[0].split("/").pop()
            , field: 'smfile'
            , auto: false
            , bindAction: '#upload' //指向一个按钮触发上传
            , choose: function (obj) {
                $("#upload").show();
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , before: function (res) {
                layer.msg('上传中', {
                    icon: 16
                    , time: 0
                    , shade: 0.01
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.status === 0) {
                    //上传成功
                    $.ajax({
                        async: false
                        , url: "/user/icon"
                        , type: 'post'
                        , data: {"data": res.data}
                        , success: function (res) {
                            layer.closeAll(); //关闭加载层
                            layer.alert(res.msg);
                            setting.reload();

                            return false;
                        }
                        , error: function (res) {
                            layer.closeAll(); //关闭加载层
                            layer.alert("错误码：" + res.status);
                            return false;
                        }
                    });
                    return false;
                } else {
                    return layer.alert('上传失败，' + res.msg);
                }

            }
            , error: function () {
                layer.closeAll(); //关闭加载层
                //演示失败状态，并实现重传
                return layer.alert('上传失败');
            }
        });
    });
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '.demo'
            ,
            skin: 'line' //行边框风格
            ,
            data: [{"id": 1, "用户": 2, "内容": 3}, {"id": 1, "用户": 2, "内容": 3}, {"id": 1, "用户": 2, "内容": 3}, {
                "id": 1,
                "用户": 2,
                "内容": 3
            }, {"id": 1, "用户": 2, "内容": 3}, {"id": 1, "用户": 2, "内容": 3}]
            ,
            page: false
            ,
            cols: [[
                {field: "id", title: "id", width: 120}
                , {field: "用户", title: "用户"}
                , {field: "时间", title: "时间"}
                , {field: "内容", title: "内容"}
            ]]
        });
    });
    layui.use(['laypage'], function () {
        var laypage = layui.laypage
        //开启HASH
        laypage.render({
            elem: 'searchpage'
            , count: 500
            , curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
            , hash: 'fenye' //自定义hash值
        });
    });
</script>
</body>
</html>